<template>
	<div id="img-list">
		<ul>
			<li v-for="img in imgs"><img :src="img.image" /></li>
		</ul>
	</div>
</template>

<script>
	import request from 'superagent'
	import jsonp from 'superagent-jsonp'
	import bus from '../bus.js'
	var i = 0
	export default {
		data() {
			return {
				imgs: []
			}
		},
		created() {
			console.log('this is created')
			bus.$on('changeData', target => { //checkbox选择的值变了之后，这边渲染的img数量增加1 
            console.log("已选择"+target);
            i++
            request
					.get('https://api.douban.com/v2/event/list?loc=108288&start=1' + '&count=' + i)
					.use(jsonp)
					.end((err, res) => {
						if(!err) {
							this.imgs = res.body.events
							console.log(this.imgs)
						}
					})
        });  
		},
		mounted: function(imgs) {
			this.$nextTick(function() {
				request
					.get('https://api.douban.com/v2/event/list?loc=108288&start=1' + '&count=3')
					.use(jsonp)
					.end((err, res) => {
						if(!err) {
							this.imgs = res.body.events
							i = this.imgs.length
							console.log(this.imgs)
						}
					})
			})
		}
	}
</script>

<style scoped>
#img-list ul{
	height: 300px;
	margin-left: 300px;
	margin-top: 100px;
}
#img-list li{
	float: left;
}
li{
	list-style: none;
	margin-left: 30px;
}
</style>